<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="shortcut icon" href="res/favicon.gif" type="image/x-icon">

		<!-- I only use jquery ironically -->

		<!-- Local versions of libs will be hosted so our Chinese players wont be forced to use VPN -->
		<script src="lib/jQuery.js"></script>
		<script src="lib/dojo.js"></script>
		<script src="lib/lz-string.js"></script>
		<script src="lib/dropbox.js"></script>

		<!-- Embeded IRC (TODO: move swfobject to local hosting) -->
		<script src="lib/swfobject.js"></script>
		<script src="lib/lightirc/config.js"></script>

		<!-- friends don't let friends use AMD and require.js -->
		<script src="lib/system.js"></script>

        <!-- <script type="text/javascript" src="http://www.kongregate.com/javascripts/kongregate_api.js"></script> -->

		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-29812134-1', 'bloodrizer.ru');
			ga('send', 'pageview');
		</script>

		<link rel="stylesheet" href="res/default.css" type="text/css">
		<link rel="stylesheet" href="res/theme_dark.css" type="text/css">
        <link rel="stylesheet" href="res/theme_grassy.css" type="text/css">
		<link rel="stylesheet" href="res/theme_sleek.css" type="text/css">

		<script type="text/javascript">

			var version = "_" + Date.now();

			function _import(i, def, modules){
				if (!def){
					return System.import(modules[i] + ".js?v=" + version);
				} else {
					return def.then(function(){
						return System.import(modules[i] + ".js?v=" + version);
					});
				}
			}

			dojo.addOnLoad(function(){
				$("#tooltip").hide();

				SystemJS.config({
					baseURL: ''
				});

				var modules = [
				    "core",
					"js/resources",
					"js/calendar",
					"js/buildings",
					"js/village",
					"js/science",
					"js/workshop",
					"js/diplomacy",
					"js/religion",
					"js/achievements",
					"js/space",
					"js/prestige",
					"js/time",
					"js/stats",
					"js/challenges",
					"game",
					"js/ui",
					"js/toolbar"
				];
				var def = System.import('core.js');

				for (var i in modules){
					def = _import(i, def, modules);
				}
				def.then(function() {
					try {
						gamePage = game = new com.nuclearunicorn.game.ui.GamePage();
						gamePage.setUI(new classes.ui.DesktopUI("gameContainerId"));

						gamePage.load();
						gamePage.updateKarma();

						gamePage.render();
						gamePage.console.static.renderFilters();
						gamePage.start();

						//---------------------------------
						//	remove me once x-mass is over
						//---------------------------------
						/*if (gamePage.resPool.get("elderBox").value == 0){
						 gamePage.resPool.get("elderBox").value++;
						 gamePage.msg("Ho-ho-ho! The Elder Gods have send you a gift box!", "important");
						 }*/
						if (gamePage.resPool.get("elderBox").value > 0 && gamePage.resPool.get("elderBox").value < 1){
							gamePage.resPool.get("elderBox").value = 1;
							gamePage.msg("The Elder Gods have repaired your gift box!", "important");
						}
						//TODO: use button to invoke this method
						//gamePage.redeemGift();
						//---------------------------------


						var host = window.location.hostname;
						if (host.indexOf("kongregate") > -1){
							$.getScript("http://www.kongregate.com/javascripts/kongregate_api.js", function() {
								console.log("loading Kongregate API...");
								gamePage.initKongregateApi();
							});
						}
						gamePage.isLocalhost = window.location.protocol == "file:" || host == "localhost" || host == "127.0.0.1";
						if (gamePage.isLocalhost){
							$("#devModeButton").show();
						}
					} catch (ex){
						if (game && game.telemetry) {
							game.telemetry.logEvent("error", ex);
						}
						console.error(ex);
						console.trace();
					}
				});
			});

			function dev(){
				if (gamePage.isLocalhost) {
					$("#dev_boostCalendar").show();
					$("#devPanelCheats").show();

					gamePage.devMode = true;
					gamePage.render();
				}
			}

			function dev_boostCalendar() {
				gamePage.calendar.ticksPerDay = 1/3;
				// TODO Temporarily kept
				gamePage.calendar.dayPerTick = 3;
			}

			function wipe(){
				if (confirm("All save data will be DESTROYED, are you sure?")){
					if (confirm("Are you ABSOLUTELY sure?")) {
						gamePage.wipe();
					}
				}
			}
			// we don't need no css, let the dynamic height be. be, dynamic height, be.
			function resetGameLogHeight(){
				$("#devPanel").outerHeight($("#footerLinks").position().top - $("#gameLog").offset().top);
			}
			$(resetGameLogHeight);
			$(window).resize(resetGameLogHeight);

		</script>

		<title>Kittens Game - a Dark Souls of incremental gaming</title>
	</head>



	<body>
		<div id="gamePageContainer">

			<div id="topBar">
				<div style="padding-left: 10px;">
					Kittens Game <span style="font-size: small;">by <a href="http://bloodrizer.ru/" target="_blank">bloodrizer</a></span>
					<!--- a Dark Souls of incremental gaming -->

					<a href="#" style="color: red">
						<!-- nothing exceptional there so far -->
					</a>

					<span id="motd">
						<!-- motd -->
					</span>

					<div id="devPanel" style="display:inline-block; padding-left: 15px; font-size: 14px;">
						<div id="devPanelFPS">
						</div>
						<div id="devPanelCheats" style="display:none">
							<a href="#" onclick="gamePage.science.unlockAll();">All techs</a>
							<a href="#" onclick="gamePage.workshop.unlockAll();">All upgrades</a>
							<a href="#" onclick="gamePage.resPool.maxAll();">All resources</a>
                            <a href="#" onclick="gamePage.bld.devAddStorage();">More storage</a>
						</div>
					</div>

				</div>
				<div id="headerLinks" style="position: absolute; top: 0; right: 10px; float: right;" >

					<div id="headerToolbar" style="font-size: 12px; display: inline-block">
						<!-- toolbar panel goes there -->
					</div>
					<span id="energyTooltip" style="padding-right: 15px; font-size: 12px;" title="Energy"></span>
					<span id="sorrowTooltip" style="padding-right: 15px; font-size: 12px;" title="Black liquid sorrow"></span>
					<span id="autosaveTooltip" style="padding-right: 15px; font-size: 12px; opacity: 0;">autosaving...</span>
					<span id="saveTooltip" style="padding-right: 15px; font-size: 12px; opacity: 0;">Saved!</span>

					<a href="#" onclick="gamePage.saveUI();">Save</a> |
					<a href="#" onclick="$('#optionsDiv').toggle();">Options</a> |
					<a href="#" onclick="gamePage.reset();">Reset</a> |
					<span id="devModeButton" style="display: none;"><a href="#" id="devBtn" onclick="dev();" title="开启后游戏将会加速，想要停止，请保存进度后刷新页面。">作弊</a> |</span>
					<a href="#" onclick="wipe();">Wipe</a> |

					<a href="#" onclick="$('#changelogDiv').toggle();">Ver 1.4.0.0</a>

				</div>
			</div>
			<div id="changelogDiv" class="dialog help" style="display: none; z-index: 9999">
				<a href="#" onclick="$('#changelogDiv').hide();" style="position: absolute; top: 10px; right: 15px;">close</a>

				<b>Changelog/features:</b>
				<br>
				<pre>
					Version: 1
						Space

					Major: 4
						Chronofurnace
						Time Impedance

					Minor 0:
						AM Drive
						AM Fission

					Rev: 0
						Void Reactors
						Winter Has Come

				</pre>
				<a href="changelog.txt" target="_blank" style="position: relative; top: -15px;">full changelog</a>
			</div>

			<div id="game" class="pure-g">
				<div id="tooltip" class="tooltipExt button_tooltip"></div>

				<!-- LEFT -->
				<div id="leftColumn" class="column" style="vertical-align: top;">
					<div style="float:left;"><a href="#" style="padding-left:2px;" onclick="gamePage.resPool.setDisplayAll();">Show All</a></div>
					<div style="float:left;"><a href="#" style="padding-left:8px;" onclick="gamePage.resPool.toggleLock();">Lock/Unlock</a></div>
					<div style="float:right; margin-right:-13px;"><a href="#" style="padding-right:2px;" onclick="gamePage.ui.zoomDown();">&ndash;</a>/<a href="#" onclick="gamePage.ui.zoomUp();">+</a></div>

					<div id="resContainer" style="padding-top: 15px; width: 100%">
					</div>

					<!-- Advisers -->

					<div id="advisorsContainer" style=" padding-top: 10px;">
					</div>

					<div id="fastHuntContainer" style="padding-left: 5px; visibility: hidden;">
						<a href="#" onclick="gamePage.huntAll(event);">Send hunters (<span id="fastHuntContainerCount"></span>)</a>
					</div>

					<div id="fastPraiseContainer" style="padding-left: 5px; visibility: hidden;">
						<a href="#" onclick="gamePage.praise(event);">Praise the sun!</a>
					</div>

					<div id="craftContainer" style="padding-top: 10px; width: 100%">
					</div>
				</div>

				<!-- MID -->
				<div id="midColumn" style="vertical-align: top;" class="column">
					<div id="gameContainerId" style="border: 1px solid gray;">
						<span style="font-size:18px;"><img src="res/ajax-loader.gif">&nbsp;Loading...<br></span>
						<br>
						<div style="font-size:12px; color: gray;">
							If this takes to much time, most likely it is not working. But don't worry.<br>
							<ul>
								<li>Try to refresh the game by pressing Ctrl+F5.</li>
								<li>Try to reload the game in about 10-15 minutes.</li>
								<li>Export your save, wipe your save, and try to import the save.</li>
								<li>If none of these work, kindly contact me via the Reddit link below.</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- RIGHT -->
				<div id="rightColumn" class="column">
					<div>
						<span id="calendarSign" style="cursor:pointer;"></span><span id="calendarDiv" style="cursor:pointer;">Calendar :V</span>
						<a id="dev_boostCalendar" href="#" onclick="dev_boostCalendar();" style="display: none; text-decoration: none; position: relative; left: 5px;">&gt;&gt;&gt;</a>
					</div>
					<div class="right-tab-header">
						<a href="#" onclick="gamePage.ui.hideChat();">Log</a>&nbsp;|
						<a href="#" onclick="gamePage.ui.loadChat();">Chat</a>
					</div>
					<div id="observeButton" style="text-align: center; margin-top: 5px; height: 30px;"></div>
					<div class="right-tab" id="rightTabLog">
						<div>
							<div style="padding-top: 10px; border-top: 1px solid gray;">
								你是一只在薄荷森林里的小猫。
							</div>

							<span id="clearLog">
								<a id="clearLogHref" href="#" onClick="gamePage.clearLog();">Clear log</a>
							</span>
							<span id="logFiltersBlock" style="padding-top: 5px">
								<a onclick="gamePage.toggleFilters();" href="#">[<span id="filterIcon">+</span>] Log Filters</a>
							</span>
							<a id="pauseBtn" style="font-size: 12px;" href="#" title="Pause/unpause the game" onclick="gamePage.togglePause();">pawse</a>
							<a id="undoBtn" style="font-size: 12px;" href="#" title="Undo the change" onclick="gamePage.undo();">undo</a>

							<div id="logFilters" style="display:none">
							</div>
						</div>
						<div id="gameLog" style="overflow-y: scroll; padding-top: 10px; height: 100%; min-height:100%;">
							<!-- Log goes there -->
						</div>
					</div>
					<div class="right-tab" id="rightTabChat" style="display:none;">
						<div id="IRCChatInner">CHAT GOES THERE</div>
					</div>
				</div>
				<!-- ADS -->
				<div id="adsColumn" class="column" style="width:200px; float: right;">
					<div>
						<a id="adLink" href="mailto:cheshire.panther@gmail.com" style="font-size:small;">
							your ad here
						</a>
					</div>

					<div id="adblock-container" style="display:none">
						<div class="adblock-header">
							Sponsored links:<br>
							<a href="#" onclick="$('#adblock-container').hide()">I don't want to see this</a>
						</div>

					</div>
				</div>
			</div>

			<div id="helpDiv" style="display: none" class="dialog help">
				<a href="#" onclick="$('#helpDiv').hide();" style="position: absolute; top: 10px; right: 15px;">close</a>
				<ul>
					<li>Q: The game is not working!</li>
					<li>A: Press Ctrl+F5. Wiping and re-importing the save may also help.</li>
					<br>
					<li>Q: Wood is useless. It's more effective to refine catnip! [formula follows]</li>
					<li>A: Catnip/wood mechanics are much more complicated.</li>
					<br>
					<li>Q: What are unicorns for?</li>
					<li>A: It's a mystery.</li>
					<br>
					<li>Q: This game is too slow!</li>
					<li>A: Things will be better. Just try to think creatively and prioritise goals.</li>
				</ul>
			</div>

			<div id="creditsDiv" style="display: none" class="dialog credits">
				<a href="#" onclick="$('#creditsDiv').hide();" style="position: absolute; top: 10px; right: 15px;">close</a>

				Sleek CSS theme by Kida, Grassy CSS theme by <a href="http://www.reddit.com/user/shrx" target="_blank">shrx</a> <br />

				<br>
				Code contribution:
				<br>
				<ul>
					<li><a href="http://www.reddit.com/user/Zusias" target="_blank">Zusias</a></li>
					<li>Duke</li>
					<li><a href="http://www.reddit.com/user/xranti" target="_blank">xranti</a></li>
                    <li><a href="http://www.reddit.com/user/klusark" target="_blank">klusark</a></li>
					<li><a href="https://coderpatsy.bitbucket.io/" target="_blank">coderpatsy</a></li>
					<li>ArcanisCz</li>
					<li>Kida</li>
					<li>freeroot</li>

				</ul>

				Thanks a lot to 4chan/igg for being such a nice guys.
				<br>
				Thanks a lot to /r/kittensgame community for all the feedback and testing
				<br>
				<br>

				Warmest thanks to <a href="http://www.reddit.com/user/ainil" target="_blank">ainil</a> for the long months of support and feedback.
				<br>
				<br>
				And finally, my undying gratitude to Waraiko.
				<br>

			</div>


			<div id="optionsDiv" style="display: none; height: 360px; margin-top:-180px" class="dialog help">
				<a href="#" onclick="gamePage.closeOptions()" style="position: absolute; top: 10px; right: 15px;">close</a>

				<label for="schemeToggle">Color scheme:</label>
				<!-- <input id="schemeToggle" type="checkbox" onclick="gamePage.toggleScheme()"> Inverted <br><br><br> -->
				<select id="schemeToggle" onchange="gamePage.toggleScheme()">
					<option value="">Classic</option>
					<option value="dark">Inverted</option>
					<option value="grassy">Grassy</option>
					<option value="sleek">Sleek (By Kida)</option>
				</select>
				<br>
				<br>

				<input id="workersToggle" type="checkbox" onclick="gamePage.useWorkers = $('#workersToggle')[0].checked;">
				<label for="workersToggle">Use web worker
					<i>(game works correctly in background tab, may cause performance issues)
						<br>
						You need to refresh the browser page for this setting to take effect.
					</i></label>
				<br>

				<input id="forceHighPrecision" type="checkbox" onclick="gamePage.forceHighPrecision = $('#forceHighPrecision')[0].checked;">
				<label for="forceHighPrecision">Use high precision for resource values</label>
				<br>

				<input id="usePerSecondValues" type="checkbox" onclick="gamePage.opts.usePerSecondValues = $('#usePerSecondValues')[0].checked;">
				<label for="usePerSecondValues">Use per second values <i>(per tick otherwise)</i></label>
				<br>
				<input id="usePercentageResourceValues" type="checkbox" onclick="gamePage.opts.usePercentageResourceValues = $('#usePercentageResourceValues')[0].checked;">
				<label for="usePercentageResourceValues">Use percentage resource production values</label>
				<br>
				<input id="highlightUnavailable" type="checkbox" onclick="gamePage.opts.highlightUnavailable = $('#highlightUnavailable')[0].checked;">
				<label for="highlightUnavailable">Highlight buildings limited by storage space</label>
				<br>
				<input id="hideSell" type="checkbox" onclick="gamePage.opts.hideSell = $('#hideSell')[0].checked;">
				<label for="hideSell">Hide 'sell' buttons</label>
				<br>
				<input id="disableCMBR" type="checkbox" onclick="gamePage.opts.disableCMBR = $('#disableCMBR')[0].checked;">
				<label for="disableCMBR">Disable global donate bonus.</label>
				<br>
				<input id="disableTelemetry" type="checkbox" onclick="gamePage.opts.disableTelemetry = $('#disableTelemetry')[0].checked;">
				<label for="disableTelemetry">Disable game statistics.</label>
				<br>
                <br>

                <a href="#" onclick="$('.optsExtra').show();">More...</a>
				<!-- looks like a to niche option to occupy entire setting slot -->
				<div class="optsExtra" style="display:none">
					<input id="noConfirm" type="checkbox" onclick="gamePage.opts.noConfirm = $('#noConfirm')[0].checked;">
					<label for="noConfirm">Do not confirm when clearing all jobs</label>
					<br>
                    <input id="IWSmelter" type="checkbox" onclick="gamePage.opts.IWSmelter = $('#IWSmelter')[0].checked;">
                    <label for="IWSmelter">Smelters turn off at 95% max Iron in Iron Will mode</label>
                    <br>
				</div>

				<br>
				<br>
				<input type="button" value="Export" onclick="gamePage.saveExport();">

				<input type="button" value="Import" onclick="$('#importData').val(''); $('#importDiv').show();" style="margin-top: 10px;">
				<br>
			</div>

			<div id="exportDiv" style="display: none" class="dialog help">
				<h1>Export To:</h1>
				<input type="button" onclick="gamePage.saveExportDropbox();" value="Dropbox (Beta)">
				<br>
				<h1>Text Export:</h1>
				<br>
				<textarea id="exportData" style="width: 550px; height: 220px;" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
				<br>
				<input type="button" value="Close" onclick="$('#exportDiv').hide();" style="margin-top: 10px;">
			</div>

			<div id="importDiv" style="display: none" class="dialog help">
				<div>Warning! Importing data will overwrite your current game data.</div>
				<h1>Import Form:</h1>
				<input type="button" onclick="gamePage.saveImportDropbox();" value="Dropbox (Beta)">
				<br>
				<h1>Text Import:</h1>
				<br>
				<textarea id="importData" style="width: 550px; height: 220px;" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
				<br>
				<input type="button" value="Import" onclick="gamePage.saveImport(); $('#importDiv').hide();" style="margin-top: 10px;">
				<input type="button" value="Cancel" onclick="$('#importDiv').hide();" style="margin-top: 10px;">

			</div>

			<div id="footerLinks">
				<a href="http://www.reddit.com/r/kittensgame/" target="_blank">reddit</a> |
				<a href="http://bloodrizer.ru/games/kittens/wiki/" target="_blank">wiki</a> |
				<!-- <a href="http://kittensgame.tumblr.com" target="_blank">tumblr</a> | -->
				<a href="#" onclick="$('#helpDiv').toggle();">help</a> |
				<a href="#" onclick="$('#creditsDiv').toggle();">credits</a> |
				<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3H8PQGAN8V8YU" target="_blank">donate</a> <!-- |
				<a href="classic/" target="_blank">classic</a> -->
			</div>
		</div>

	</body>
</html>
